<template>
    <div>MyChild子级组件</div>
    <h4>msg:{{msg}}</h4>
    <button @click="update">数据改变</button>
</template>
<script lang='ts'>
import { defineComponent,ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
export default defineComponent({
    name: 'MyChild',
    // vue2.x中的声明周期钩子
    beforeCreate(){
        console.log('2.x中的beforeCreate...');
    },
    created(){
        console.log('vue2.x中的created....');
    },
    beforeMount(){
        console.log('vue2.x中的beforeMount....');
    },
    mounted(){
        console.log('vue2.x中的mounted....');
    },
    beforeUpdate(){
        console.log('vue2.x中的beforeUpdate....');
    },
    updated(){
        console.log('vue2.x中的updated....');
    },
    //vue2.x中的beforeDestroy和destroyed这两个生命周期回调已经在vue3中改名了,所以不能使用了
    beforeUnmount() {
        console.log('vue2.x中的beforeDestroy....');
    },
    unmounted() {
        console.log('vue2.x中的destroyed....');
    },
    setup(){
        console.log('3.0中的setup');
        const msg = ref('abc')
        //按钮点击事件的回调
        const update = ()=>{
            msg.value+='===='
        }
        onBeforeMount(()=>{
            console.log('3.0中的onBeforeMount');
        })
        // 可以在这里发布异步请求
        onMounted(()=>{
            console.log('3.0中的onMounted');
            
        })
        // ,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
        onBeforeUpdate(()=>{
            console.log('3.0中的onBeforeUpdate');
        })
        onUpdated(()=>{
            console.log('3.0中的onUpdated');
        })
        onBeforeUnmount(()=>{
            console.log('3.0中的onBeforeUnmount');
        })
        onUnmounted(()=>{
            console.log('3.0中的onUnmounted');
        })
        return{
            msg,
            update
        }
    }
})
</script>